// import React from 'react';
import { useDispatch } from 'react-redux';
// import { addItem } from '../../../store/index';
import './index.scss'

/**
 * 文本组件，提供文本内容的添加和拖拽功能
 */
const Text = () => {
  const dispatch = useDispatch();

  /**
   * 处理拖拽开始事件
   * @param {DragEvent} e - 拖拽事件对象
   * @param {string} content - 要拖拽的文本内容
   */
  const handleDragStart = (e, content) => {
    // 使用dataTransfer对象在拖拽操作中传递文本内容
    e.dataTransfer.setData('text/plain', JSON.stringify({content,type:"text"}));
  };

  return (
    <div className='text'>
      <div className="text_top">
        <div>+添加标题</div>
        <div>+添加正文</div>
      </div>
      <div className="text_bottom">
        {/* // 映射不同的文本样式选项，用户可以通过拖拽来添加这些样式 */}
        {[
          '标题', '正文', '学院', '斜阴影', '土味', '夹心', '抖音','发光', '可爱', '立体','做旧', '金属','质感','荧光','做旧','动漫','青春','卡通'
        ].map((item, index) => (
          <div key={index} draggable onDragStart={(e) => handleDragStart(e, item)}>
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Text;